<style scoped>
</style>

<template>

  <div>

    <Modal v-model="IsModalShow" :title="tableTitle" @on-cancel="cancel" width="1200">
      <Row>
        <Col :span="formTitle===''?24:15">
        <Row>
          <Button size="small" icon="plus" @click="addItem">添加</Button>
        </Row>
        <Row>
          <Table stripe size="small" :columns="tableColums" :data="tableData"></Table>
        </Row>
        <Row>
          <Page :total="total" :current="currentPage" @on-change="changeCurrentPage" show-total style="float:right;margin-top:10px"></Page>
        </Row>
        </Col>
        <Col span="9" v-if="formTitle">
        <h3 style="margin:10px 50px;">{{formTitle}}</h3>
        <Form ref="modalForm" :model="modalForm" :label-width="80" value=true style="padding: 3px 60px">
          <Form-item label="子单位名" prop="name" :rules="{required: true, message: '必填', trigger:'blur',type:'string'}">
            <Input v-model="modalForm.name"></Input>
          </Form-item>
          <Form-item label="责任人" prop="managerName" :rules="{required: true, message: '必填,1-50位字符',min:1,max:100, trigger:'blur',type:'string'}">
            <Input v-model="modalForm.managerName"></Input>
          </Form-item>
          <Form-item label="联系电话" prop="managerMobile" :rules="{required: true, message: '输入11位手机号', trigger:'blur',type:'string',pattern: /^1\d{10}$/}">
            <Input v-model="modalForm.managerMobile"></Input>
          </Form-item>
          <Form-item label="地址">
            <Input size="small" v-model="modalForm.addr" type="textarea"></Input>
          </Form-item>
        </Form>
        </Col>
      </Row>

      <div slot="footer">
        <Button type="ghost" @click="cancel">关闭</Button>
        <Button type="primary" :loading="modalForm_loading" @click="saveForm('modalForm')">保存</Button>
      </div>
    </Modal>
  </div>

</template>

<script>
import {
  getBuildingsPagedList,
  saveBuilding,
  delBuilding
} from "@/api/getData";
import { clearObj } from "@/libs/util";
export default {
  props: {
    modalShow: {
      type: Boolean,
      default: false
    },
    groupCompanyId: {
      type: Number,
      default: 0
    },
    departmentId: {
      type: Number,
      default: 0
    },
    tableTitle: {
      type: String,
      default: "子单位列表"
    }
  },
  data() {
    return {
      IsModalShow: false,
      tableColums: [
        {
          align: "center",
          title: "子单位名",
          key: "name"
        },
        {
          align: "center",
          title: "负责人",
          key: "managerName"
        },
        {
          align: "center",
          title: "联系电话",
          key: "managerMobile"
        },

        {
          align: "center",
          title: "地址",
          key: "addr"
        },
         {
          align: "center",
          title: "微信名",
          key: "wxName"
        },
        {
          align: "center",
          title: "责任书",
          key: "wxImage"
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.editItem(params.row);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.delItem(params.row.id);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      tableData: [],
      total: 0,
      currentPage: 1,
      formTitle: "",
      modalForm: {
        id: "",
        name: "",
        managerName: "",
        managerMobile: "",
        smkGroupCompanyId: 0,
        departmentId: 0
      },
      modalForm_loading: false,
      searchForm: {
        gc_id: "",
        rows: 10,
        page: 1
      }
    };
  },
  watch: {
    modalShow(curVal, oldVal) {
      this.IsModalShow = curVal;
      if (parseInt(this.groupCompanyId) > 0 && curVal) {
        this.getTableList();
        this.formTitle = "";
        clearObj(this.modalForm);
      }
    }
  },
  mounted() {},
  methods: {
    async getTableList() {
      this.searchForm.gc_id = this.groupCompanyId;
      this.searchForm.page = this.currentPage - 1;
      const params = this.searchForm;
      const result = await getBuildingsPagedList(params);
      if (result.code == 0) {
        let res = result.data;
        this.total = res.total;
        this.tableData = res.data;
      }
    },
    cancel() {
      this.$emit("listenModalTable");
    },
    addItem() {
      this.formTitle = "添加子单位";
      clearObj(this.modalForm);
      this.modalForm.smkGroupCompanyId = this.groupCompanyId;
      this.modalForm.departmentId = this.departmentId;
    },
    editItem(row) {
      this.formTitle = "修改子单位";
      this.modalForm = JSON.parse(JSON.stringify(row));
    },
    async delItem(id) {
      const res = await delBuilding({ id: id });
      if (res.code == 0) {
        this.getTableList();
      }
    },
    saveForm(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {
          this.modalForm_loading = true;
          const params = this.modalForm;
          try {
            let result = await saveBuilding(params);

            if (result.code == 0) {
              this.getTableList();
            }
          } catch (err) {
            console.log(err);
            this.$Message.error("服务器异常，稍后再试");
          }
          this.modalForm_loading = false;
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    }
  }
};
</script>
